<template>
  <div>
    <!-- 单标签纯css实现天气图标 -->
    <!-- 参考地址 https://www.jb51.net/css/682623.html -->
    <!-- 晴 -->
    <div class="weather sunny"></div>
    <!-- 阴 -->
    <div class="weather cloudy"></div>
    <!-- 雨 -->
    <div class="weather rainy"></div>
    <!-- 雪 -->
    <div class="weather snowy"></div>
    <!-- 雷 -->
    <div class="weather thundery"></div>
    <!-- 阴天太阳 -->
    <div class="weather cloudySun"></div>
    <div class="weather cloudySun"></div>
    <div class="weather cloudySun"></div>

    <div class="weather">{{ x }}</div>
    <div class="weather">{{ y }}</div>
    <div class="weather">{{ z }}</div>

    <!-- 下雨 -->
    <div class="raining"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      x: 0,
      y: 0,
      z: 0
    }
  },
  onLoad() {
    wx.startDeviceMotionListening()
    wx.onDeviceMotionChange(res => {
      this.x = res.alpha
      this.y = res.beta
      this.z = res.gamma
      console.log(res)
    })
  },
  onUnload() {
    wx.stopDeviceMotionListening()
    wx.offDeviceMotionChange()
  }
}
</script>

<style lang="scss" scoped>
// 涉及css3属性
// transform：位移旋转缩放
// box-shadow：利用投影实现图形的复制，影分身
// clip-path：基于绘制的形状对元素进行遮罩处理
// animation：设置元素的动画
// ::before和::after的使用

.weather {
  position: relative;
  display: inline-block;
  width: 180rpx;
  height: 240rpx;
  background: #23b7e5;
  border-radius: 8rpx;
  margin: 10rpx 3rpx;
}
.sunny::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 60rpx;
  height: 60rpx;
  background: #f6d963;
  border-radius: 50%;
  box-shadow: 0 0 20rpx #ff0;
}
.sunny::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 90rpx;
  height: 90rpx;
  margin: -45rpx 0 0 -45rpx;
  background: #FFEB3B;
  clip-path: polygon(
    50% 0%,
    64.43% 25%,
    93.3% 25%,
    78.87% 50%,
    93.3% 75%,
    64.43% 75%,
    50% 100%,
    35.57% 75%,
    6.7% 75%,
    21.13% 50%,
    6.7% 25%,
    35.57% 25%
  );
  animation: sunScale 2s linear infinite;
}

.cloudy::before,
.rainy::before,
.snowy::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 36rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    #fff 22rpx -15rpx 0 6rpx,
    #fff 57rpx -6rpx 0 2rpx,
    #fff 87rpx 4rpx 0 -4rpx,
    #fff 33rpx 6rpx 0 6rpx,
    #fff 61rpx 6rpx 0 2rpx,
    #ccc 29rpx -23rpx 0 6rpx,
    #ccc 64rpx -14rpx 0 2rpx,
    #ccc 94rpx -4rpx 0 -4rpx;
}
.cloudy::before {
  animation: cloudMove 2s linear infinite;
}


.rainy::after {
  content: '';
  position: absolute;
  top:50%;
  left: 25%;
  width: 4rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 2rpx;
  box-shadow:
  #fff 25rpx -10rpx 0,
  #fff 50rpx 0 0,
  #fff 75rpx -10rpx 0,
  #fff 0 25rpx 0,
  #fff 25rpx 15rpx 0,
  #fff 50rpx 25rpx 0,
  #fff 75rpx 15rpx 0,
  #fff 0 50rpx 0,
  #fff 25rpx 40rpx 0,
  #fff 50rpx 50rpx 0,
  #fff 75rpx 40rpx 0;
  animation: rainDrop 2s linear infinite;
}
.snowy:after {
  content: "";
  position: absolute;
  top:50%;
  left: 25%;
  width: 8rpx;
  height: 8rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow:
  #fff 25rpx -10rpx 0,
  #fff 50rpx 0 0,
  #fff 75rpx -10rpx 0,
  #fff 0 25rpx 0,
  #fff 25rpx 15rpx 0,
  #fff 50rpx 25rpx 0,
  #fff 75rpx 15rpx 0,
  #fff 0 50rpx 0,
  #fff 25rpx 40rpx 0,
  #fff 50rpx 50rpx 0,
  #fff 75rpx 40rpx 0;
  animation: snowDrop 2s linear infinite; 
}

.thundery::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 36rpx;
  height: 36rpx;
  background: #bbb;
  border-radius: 50%;
  box-shadow: 
    #bbb 22rpx -15rpx 0 6rpx,
    #bbb 57rpx -6rpx 0 2rpx,
    #bbb 87rpx 4rpx 0 -4rpx,
    #bbb 33rpx 6rpx 0 6rpx,
    #bbb 61rpx 6rpx 0 2rpx,
    #ccc 29rpx -23rpx 0 6rpx,
    #ddd 64rpx -14rpx 0 2rpx,
    #ccc 94rpx -4rpx 0 -4rpx;
  animation: thunderyStorm 3s ease-in infinite;
}
@keyframes thunderyStorm {
  0% {
    box-shadow: 
    #bbb 22rpx -15rpx 0 6rpx,
    #bbb 57rpx -6rpx 0 2rpx,
    #bbb 87rpx 4rpx 0 -4rpx,
    #bbb 33rpx 6rpx 0 6rpx,
    #bbb 61rpx 6rpx 0 2rpx,
    #ccc 29rpx -23rpx 0 6rpx,
    #ddd 64rpx -14rpx 0 2rpx,
    #ccc 94rpx -4rpx 0 -4rpx;
  }
  71% {
    background: #bbb;
    box-shadow: 
    #bbb 22rpx -15rpx 0 6rpx,
    #bbb 57rpx -6rpx 0 2rpx,
    #bbb 87rpx 4rpx 0 -4rpx,
    #bbb 33rpx 6rpx 0 6rpx,
    #bbb 61rpx 6rpx 0 2rpx,
    #ccc 29rpx -23rpx 0 6rpx,
    #ddd 64rpx -14rpx 0 2rpx,
    #ccc 94rpx -4rpx 0 -4rpx;
  }
  74% {
    background: #ddd;
    box-shadow: 
    #ddd 22rpx -15rpx 0 6rpx,
    #ddd 57rpx -6rpx 0 2rpx,
    #ddd 87rpx 4rpx 0 -4rpx,
    #ddd 33rpx 6rpx 0 6rpx,
    #ddd 61rpx 6rpx 0 2rpx,
    #eee 29rpx -23rpx 0 6rpx,
    #fff 64rpx -14rpx 0 2rpx,
    #eee 94rpx -4rpx 0 -4rpx;
  }
  77% {
    background: #bbb;
    box-shadow: 
    #bbb 22rpx -15rpx 0 6rpx,
    #bbb 57rpx -6rpx 0 2rpx,
    #bbb 87rpx 4rpx 0 -4rpx,
    #bbb 33rpx 6rpx 0 6rpx,
    #bbb 61rpx 6rpx 0 2rpx,
    #ccc 29rpx -23rpx 0 6rpx,
    #ddd 64rpx -14rpx 0 2rpx,
    #ccc 94rpx -4rpx 0 -4rpx;
  }
  80% {
    background: #ddd;
    box-shadow: 
    #ddd 22rpx -15rpx 0 6rpx,
    #ddd 57rpx -6rpx 0 2rpx,
    #ddd 87rpx 4rpx 0 -4rpx,
    #ddd 33rpx 6rpx 0 6rpx,
    #ddd 61rpx 6rpx 0 2rpx,
    #eee 29rpx -23rpx 0 6rpx,
    #fff 64rpx -14rpx 0 2rpx,
    #eee 94rpx -4rpx 0 -4rpx;
  }
  100% {
    box-shadow: 
    #bbb 22rpx -15rpx 0 6rpx,
    #bbb 57rpx -6rpx 0 2rpx,
    #bbb 87rpx 4rpx 0 -4rpx,
    #bbb 33rpx 6rpx 0 6rpx,
    #bbb 61rpx 6rpx 0 2rpx,
    #ccc 29rpx -23rpx 0 6rpx,
    #ddd 64rpx -14rpx 0 2rpx,
    #ccc 94rpx -4rpx 0 -4rpx;
  }
}


.cloudySun::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 36rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    #fff 22rpx -15rpx 0 6rpx,
    #fff 57rpx -6rpx 0 2rpx,
    #fff 87rpx 4rpx 0 -4rpx,
    #fff 33rpx 6rpx 0 6rpx,
    #fff 61rpx 6rpx 0 2rpx,
    #ddd 29rpx -23rpx 0 6rpx,
    #eee 64rpx -14rpx 0 2rpx,
    #ddd 94rpx -4rpx 0 -4rpx;
  animation: cloudMove 3s linear infinite;
}
.cloudySun::after {
  content: '';
  position: absolute;
  top: 38%;
  left: 60%;
  transform: translate(-50%, -50%);
  // z-index: 2;
  width: 50rpx;
  height: 50rpx;
  background: #f6d963;
  border-radius: 50%;
  box-shadow: 0 0 20rpx #ff0;
}





@keyframes sunScale {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes cloudMove {
  0% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -60%); }
  100% { transform: translate(-50%, -50%); }
}

@keyframes rainDrop {
  0% { transform: translate(0, 0) rotate(10deg) }
  100% {
    transform: translate(-4rpx, 24rpx) rotate(10deg);
    box-shadow:
      #fff 25rpx -10rpx 0,
      #fff 50rpx 0 0,
      #fff 75rpx -10rpx 0,
      #fff 0 25rpx 0,
      #fff 25rpx 15rpx 0,
      #fff 50rpx 25rpx 0,
      #fff 75rpx 15rpx 0,
      rgba(255, 255, 255, 0) 0 50rpx 0,
      rgba(255, 255, 255, 0) 25rpx 40rpx 0,
      rgba(255, 255, 255, 0) 50rpx 50rpx 0,
      rgba(255, 255, 255, 0) 75rpx 40rpx 0;
  }
}

@keyframes snowDrop {
  0% { transform: translateY(0); }
  100% {
    transform: translateY(25rpx);
    box-shadow:
    #fff 25rpx -10rpx 0,
    #fff 50rpx 0 0,
    #fff 75rpx -10rpx 0,
    #fff 0 25rpx 0,
    #fff 25rpx 15rpx 0,
    #fff 50rpx 25rpx 0,
    #fff 75rpx 15rpx 0,
    rgba(255, 255, 255, 0) 0 50rpx 0,
    rgba(255, 255, 255, 0) 25rpx 40rpx 0,
    rgba(255, 255, 255, 0) 50rpx 50rpx 0,
    rgba(255, 255, 255, 0) 75rpx 40rpx 0;
  }
}





.raining {

}




</style>
